<template>
  <div class="product-list">
    <div class="title">房源列表</div>
    <!-- 顶部搜索 -->
    <div class="header-top">
      <el-form :inline="true">
        <el-form-item label="城市">
          <el-select v-model="tiaojian.city" placeholder="选择城市" style="width: 120px;">
            <el-option v-for="(item, index) in options.city" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区域">
          <el-select v-model="tiaojian.firstRegion" placeholder="选择区" style="width: 120px;" @change="changeArea">
            <el-option v-for="(item, index) in options.first" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="tiaojian.secondRegion" placeholder="选择地方" style="width: 120px;">
            <el-option v-for="(item, index) in options.second" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="户型">
          <el-select v-model="tiaojian.kind" placeholder="选择户型" style="width: 120px;">
            <el-option v-for="(item, index) in options.kind" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="朝向">
          <el-select v-model="tiaojian.orientation" placeholder="选择朝向" style="width: 120px;">
            <el-option v-for="(item, index) in options.orientation" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="tiaojian.state" placeholder="房源状态" style="width: 120px;">
            <el-option v-for="(item, index) in options.state" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="更新日期">
          <el-date-picker v-model="tiaojian.updatedAt" type="date" placeholder="选择日期" style="width: 140px;">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="标题">
          <el-input clearable v-model="tiaojian.title" placeholder="标题" style="width: 150px;"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="search" type="primary" @click="goSearch">查询</el-button>
          <el-button type="info" @click="clearTiaojian">清空条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post">
      <el-button type="primary" @click="goPage('B_PostProduct')">发布房源</el-button>
    </div>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%" max-height="400" :default-sort="{prop: 'id', order: 'desc'}" v-loading="loading">
      <el-table-column prop="id" label="id" width="60" align="center" sortable>
      </el-table-column>
      <!-- <el-table-column prop="img" label="图片" width="80" align="center">
        <div class="img-box"></div>
      </el-table-column> -->
      <el-table-column prop="title" label="标题" width="200">
      </el-table-column>
      <el-table-column prop="kind" label="户型" width="100">
      </el-table-column>
      <el-table-column prop="sup" label="总价(万)" width="100" align="right" sortable></el-table-column>
      <el-table-column prop="sub" label="单价(元/㎡)" width="115" align="right" sortable></el-table-column>
      <el-table-column prop="builtArea" label="建筑面积" width="110" align="right" sortable>
        <template slot-scope="scope">
          {{scope.row.builtArea}}㎡
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="95">
        <template slot-scope="scope">
          {{((key)=>{
            switch(key){
              case 0: return '审核中';break;
              case 1: return '在售';break;
              case 2: return '已售';break;
              case 3: return '取消委托';break;
              case 4: return '审核不通过';break;
              case -1: return '下架';break;
            }
          })(scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160" sortable>
        <template slot-scope="scope">
          {{$util.formDate(scope.row.createdAt)}}
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="160" sortable>
        <template slot-scope="scope">
          {{$util.formDate(scope.row.updatedAt)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="btns" style="text-align:center;">
            <el-button type="primary" size="mini" @click="openCheck(scope.row)">查看</el-button>
            <el-button type="warning" size="mini" v-show="scope.row.state == -1 || scope.row.state == 0" @click="goPage(scope.row.id)">编辑</el-button>
            <!-- <el-button type="success" size="mini" v-show="scope.row.state == -1">上架</el-button> -->
            <!-- <el-button type="info" size="mini" v-show="scope.row.state == 1" @click="changeState(scope.row, -1)">下架</el-button> -->
            <!-- <el-button type="danger" size="mini" v-show="scope.row.state == 2 || scope.row.state == -1 || scope.row.state == 3">删除</el-button> -->

            <el-popconfirm title="确定上架此房源吗？" v-show="scope.row.state == -1" @confirm="changeState(scope.row, 1)" style="margin-left:10px">
              <el-button size="mini" type="info" slot="reference">上架</el-button>
            </el-popconfirm>

            <el-popconfirm title="确定下架此房源吗？" v-show="scope.row.state == 1" @confirm="changeState(scope.row, -1)" style="margin-left:10px">
              <el-button size="mini" type="info" slot="reference">下架</el-button>
            </el-popconfirm>

            <el-popconfirm title="确定删除此数据吗？" v-show="scope.row.state == 2 || scope.row.state == -1 || scope.row.state == 3" @confirm="delRecord(scope.row)" style="margin-left:10px">
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 15, 20]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="params.total">
      </el-pagination>
    </div>

    <!-- 查看对话框 -->
    <el-dialog :visible.sync="dialog.check" width="600px" center>
      <template slot="title">
        <b>查看房源信息</b>
      </template>
      <el-form ref="infoData" :model="infoData" label-width="110px" :inline="true">
        <el-form-item label="标题：" style="margin-bottom: 0px;width:255px;">
          {{infoData.title}}
        </el-form-item>

        <el-form-item label="小区名：" style="margin-bottom: 0px;width:255px;">
          {{infoData.estateName}}
        </el-form-item>

        <el-form-item label="城市：" style="margin-bottom: 0px;width:255px;">
          {{infoData.city}}
        </el-form-item>

        <el-form-item label="地区：" style="margin-bottom: 0px;width:255px;">
          {{infoData.location}}
        </el-form-item>

        <el-form-item label="栋阁房号：" style="margin-bottom: 0px;width:255px;">
          {{infoData.houseNum}}
        </el-form-item>

        <el-form-item label="户型：" style="margin-bottom: 0px;width:255px;">
          {{infoData.kind}}
        </el-form-item>

        <el-form-item label="房源总价：" style="margin-bottom: 0px;width:255px;">
          {{infoData.sup}}万元
        </el-form-item>

        <el-form-item label="建筑面积：" style="margin-bottom: 0px;width:255px;">
          {{infoData.builtArea}}㎡
        </el-form-item>
        <el-form-item label="套内面积：" style="margin-bottom: 0px;width:255px;">
          {{infoData.insideArea}}㎡
        </el-form-item>

        <el-form-item label="单价：" style="margin-bottom: 0px;width:255px;">
          {{infoData.sub}}元/㎡
        </el-form-item>

        <el-form-item label="建成年代：" style="margin-bottom: 0px;width:255px;">
          {{infoData.builtYear}}年
        </el-form-item>

        <el-form-item label="装修：" style="margin-bottom: 0px;width:255px;">
          {{infoData.decoration}}
        </el-form-item>

        <el-form-item label="楼层：" style="margin-bottom: 0px;width:255px;">
          {{infoData.floor}}
        </el-form-item>

        <el-form-item label="朝向：" style="margin-bottom: 0px;width:255px;">
          {{infoData.orientation}}
        </el-form-item>

        <el-form-item label="用途：" style="margin-bottom: 0px;width:255px;">
          {{infoData.purpose}}
        </el-form-item>

        <el-form-item label="产权性质：" style="margin-bottom: 0px;width:255px;">
          {{infoData.nature}}
        </el-form-item>

        <el-form-item label="产权年限：" style="margin-bottom: 0px;width:255px;">
          {{infoData.propertyYear}}
        </el-form-item>

        <el-form-item label="附近门店：" style="margin-bottom: 0px;width:255px;">
          {{infoData.branch}}
        </el-form-item>

        <el-form-item label="房源标签：" style="margin-bottom: 0px;display: block;">
          <span class="tag1" v-show="infoData.tag1" style="margin-right: 10px;">精选好房</span>
          <span class="tag2" v-show="infoData.tag2" style="margin-right: 10px;">{{infoData.tag2}}</span>
          <span class="tag3" v-show="infoData.tag3" style="margin-right: 10px;">红本在手</span>
          <span class="tag4" v-show="infoData.tag4" style="margin-right: 10px;">有电梯</span>
          <span class="tag5" v-show="infoData.tag5" style="margin-right: 10px;">随时可看</span>
        </el-form-item>

        <el-form-item label="房源亮点：" style="margin-bottom: 0px;display: block;">
          {{infoData.lights_desc}}
        </el-form-item>

        <el-form-item label="装修简介：" style="margin-bottom: 0px;display: block;">
          {{infoData.dec_desc}}
        </el-form-item>

        <el-form-item label="户型简介：" style="margin-bottom: 0px;display: block;">
          {{infoData.kind_desc}}
        </el-form-item>

        <el-form-item label="附近交通：" style="margin-bottom: 0px;display: block;">
          {{infoData.traffic}}
        </el-form-item>

        <el-form-item label="房源状态：" style="margin-bottom: 0px;display: block;">
          {{((key)=>{
            switch(key){
              case 0: return '审核中';break;
              case 1: return '在售';break;
              case 2: return '已售';break;
              case 3: return '取消委托';break;
              case 4: return '审核不通过';break;
              case -1: return '下架';break;
            }
          })(infoData.state)}}
        </el-form-item>

        <el-form-item label="委托人姓名：" style="margin-bottom: 0px;width:255px;">
          {{infoData.userName ? infoData.userName : '无'}}
        </el-form-item>

        <el-form-item label="委托人手机号：" style="margin-bottom: 0px;width:255px;">
          {{infoData.userPhone ? infoData.userPhone : '无'}}
        </el-form-item>

        <el-form-item label="挂牌日期：" style="margin-bottom: 0px;width:255px;">
          {{infoData.sellingTime ? $util.formDate(infoData.sellingTime) : '无'}}
        </el-form-item>

        <el-form-item label="交易日期：" style="margin-bottom: 0px;width:255px;">
          {{infoData.transactionDate ? $util.formDate(infoData.transactionDate) : '无'}}
        </el-form-item>

        <el-form-item label="房源封面：" style="margin-bottom: 0px;">
          <img :src="infoData.img" alt="" width="250">
        </el-form-item>

        <div style="text-align: center;">
          <el-button type="primary" @click="dialog.check = false" style="width: 100px">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import "@/assets/less/b_product-list.less";
export default {
  name: "HouseList",
  data() {
    return {
      loading: false,
      tableData: [],

      options: {
        city: [
          {
            label: '不限',
            value: ''
          },
          {
            label: '广州',
            value: '广州'
          },
          {
            label: '深圳',
            value: '深圳'
          },
        ],
        kind: [
          {
            label: '不限',
            value: ''
          },
          {
            label: '1室',
            value: 1
          },
          {
            label: '2室',
            value: 2
          },
          {
            label: '3室',
            value: 3
          },
          {
            label: '4室',
            value: 4
          },
          {
            label: '5室',
            value: 5
          },
          {
            label: '6室',
            value: 6
          },
          {
            label: '7室',
            value: 7
          },
          {
            label: '8室',
            value: 8
          },
          {
            label: '9室',
            value: 9
          },
        ],
        state: [
          {
            label: '不限',
            value: ''
          },
          {
            label: '在售',
            value: 1
          },
          {
            label: '已售',
            value: 2
          },
          {
            label: '取消委托',
            value: 3
          },
          {
            label: '审核不通过',
            value: 4
          },
          {
            label: '下架',
            value: -1
          },
        ],
        orientation: [
          {
            label: '不限',
            value: ''
          },
          {
            label: '东',
            value: '东'
          },
          {
            label: '南',
            value: '南'
          },
          {
            label: '西',
            value: '西'
          },
          {
            label: '北',
            value: '北'
          },
          {
            label: '东南',
            value: '东南'
          },
          {
            label: '东北',
            value: '东北'
          },
          {
            label: '西南',
            value: '西南'
          },
          {
            label: '南北',
            value: '南北'
          },
        ],
        first: [],
        second: [],
      },
      dialog: {
        check: false,
      },
      infoData: {
        title: "",
        estateName: "",
        city: '',
        location: '',
        houseNum: '',
        sup: '',
        builtArea: '',
        insideArea: '',
        kind: "",
        floor: "",
        orientation: "",
        builtYear: "",
        decoration: "",
        branch: "",
        purpose: "",// 用途
        nature: "",// 产权性质
        propertyYear: '',// 产权年限
        sellingTime: "",
        tag1: 0,
        tag2: "",
        tag3: 0,
        tag4: 0,
        tag5: 0,
        lights_desc: "",
        dec_desc: "",
        kind_desc: "",
        traffic: "",
        state: 1,
        userName: '',
        userPhone: '',
      },
      // 条件
      tiaojian: {
        city: '',
        firstRegion: '不限',
        secondRegion: '不限',
        kind: '',
        orientation: '',
        state: '',
        updatedAt: '',
        title: '',
      },
      // 查询条件
      params: {
        total: 0,// 总数
        page: 1,// 第一页
        size: 10,// 一页10条
        state: '',// 空为所有
        city: '',
        title: '',
        // sup: [],
        orientation: '',
        // area: [],
        firstRegion: '不限',
        secondRegion: '不限',
        kind: '',
        // purpose: [],
        // floor: [],
        // builtYear: [],
        // decoration: [],
        // tag: [],
        updatedAt: '',
      }
    };
  },
  created() {
    let oj = {
      title: '房源列表',
      nav: '1-1',
    };
    this.$emit('isTitle', oj);
    this.options.first = JSON.parse(JSON.stringify(this.$root.areaData));
    this.init();
  },

  methods: {
    init() {
      this.loading = true;
      let data = {
        city: this.params.city,
        page: this.params.page,
        size: this.params.size,
        state: this.params.state,
        title: this.params.title,
        orientation: this.params.orientation,
        firstRegion: this.params.firstRegion == '不限' ? '' : this.params.firstRegion,
        secondRegion: this.params.secondRegion == '不限' ? '' : this.params.secondRegion,
        // sup: this.params.sup,
        // area: this.params.area,
        kind: this.params.kind,
        // purpose: this.params.purpose,
        // floor: this.params.floor,
        // builtYear: this.params.builtYear,
        // decoration: this.params.decoration,
        // tag: this.params.tag,
        // order: this.order,
        updatedAt: this.params.updatedAt ? this.$util.formDate(this.params.updatedAt).substring(0, 10) : '',
      }
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getHouseList',
        params: data
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.loading = false;
          this.tableData = res.data.data;
          console.log('List==>', this.tableData)
          this.params.total = res.data.total;
          // this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
          this.loading = false;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 清空条件
    clearTiaojian() {
      this.tiaojian = {
        city: '',
        firstRegion: '不限',
        secondRegion: '不限',
        kind: '',
        orientation: '',
        state: '',
        updatedAt: '',
        title: '',
      };
      this.params = {
        total: 0,// 总数
        page: 1,// 第一页
        size: 10,// 一页10条
        state: '',// 空为所有
        city: '',
        title: '',
        // sup: [],
        orientation: '',
        // area: [],
        firstRegion: '不限',
        secondRegion: '不限',
        kind: '',
        // purpose: [],
        // floor: [],
        // builtYear: [],
        // decoration: [],
        // tag: [],
        updatedAt: '',
      };
      this.init();
    },
    // 路由跳转
    goPage(i) {
      this.$router.push(`/backstage/PostHouse?id=${i}`);
    },
    // 改变搜索条件
    goSearch() {
      this.params.page = 1;
      this.params.city = this.tiaojian.city;
      this.params.firstRegion = this.tiaojian.firstRegion;
      this.params.secondRegion = this.tiaojian.secondRegion;
      this.params.kind = this.tiaojian.kind;
      this.params.orientation = this.tiaojian.orientation;
      this.params.state = this.tiaojian.state;
      this.params.updatedAt = this.tiaojian.updatedAt;
      this.params.title = this.tiaojian.title;
      this.init();
    },
    // 选择区域
    changeArea() {
      // console.log(this.params.firstRegion)
      this.tiaojian.secondRegion = '不限';
      for (const i in this.options.first) {
        if (this.options.first[i].value == this.tiaojian.firstRegion) {
          console.log(this.options.first[i].value)
          this.options.second = this.options.first[i].children;
        }
      }
    },
    // 改变状态
    changeState(o, t) {
      let msg = '';
      if (t == -1) {
        msg = '下架'
      } else if (t == 1) {
        msg = '上架'
      } else if (t == 2) {
        msg = '出售'
      }
      this.axios({
        method: 'put',
        url: this.baseUrl + '/editHouse',
        params: {
          id: o.id,
          state: t,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.$message.success(`${msg}成功`)
          this.init();
        } else {
          this.$message.error(`${msg}失败`)
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 删除记录
    delRecord(o) {
      if (o.userPhone) {
        this.$confirm('该房源委托人未取消委托, 是否继续删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios({
            method: 'delete',
            url: this.baseUrl + '/deleteHouse',
            params: {
              id: o.id,
            }
          }).then(res => {
            console.log('res==>', res)
            if (res.data.code == 200) {
              this.$message.success('删除记录成功')
              this.params.page = 1;
              this.init();
            } else {
              this.$message.error('删除记录失败')
            }
          }).catch(err => {
            console.log('err==>', err)
            this.$message.error(res.data.msg)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.axios({
          method: 'delete',
          url: this.baseUrl + '/deleteHouse',
          params: {
            id: o.id,
          }
        }).then(res => {
          console.log('res==>', res)
          if (res.data.code == 200) {
            this.$message.success('删除记录成功')
            this.init();
          } else {
            this.$message.error('删除记录失败')
          }
        }).catch(err => {
          console.log('err==>', err)
          this.$message.error(res.data.msg)
        })
      }
    },
    // 打开查看
    openCheck(o) {
      // console.log(o)
      this.infoData = {
        title: o.title,
        estateName: o['estate.estateName'],
        city: o['estate.city'],
        location: o['estate.location'],
        houseNum: o.houseNum,
        sup: o.sup,
        builtArea: o.builtArea,
        insideArea: o.insideArea,
        kind: o.kind,
        floor: o.floor,
        orientation: o.orientation,
        builtYear: o.builtYear,
        decoration: o.decoration,
        branch: o.branch,
        purpose: o.purpose,
        nature: o.nature,
        propertyYear: o.propertyYear,
        sellingTime: o.sellingTime,
        tag1: o.tag1,
        tag2: o.tag2,
        tag3: o.tag3,
        tag4: o.tag4,
        tag5: o.tag5,
        lights_desc: o.lights_desc,
        dec_desc: o.dec_desc,
        kind_desc: o.kind_desc,
        traffic: o.traffic,
        state: o.state,
        userName: o.userName,
        userPhone: o.userPhone,
        img: o.img,
        imgList: o.imgList,
      };
      this.dialog.check = true;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
      this.init();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
    }
  }
};
</script>
